<template>
	<view :style="themeColor()" class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden">
		<view v-if="!loading">
			<template v-if="config.fenxiao_config.is_fenxiao == 1">
				<view :style="{ background: 'url(' + img('addon/shop_fenxiao/index/header_bg.png') + ') left top / 100% 100% no-repeat' }">
					<!-- #ifdef MP-WEIXIN -->
					<top-tabbar :data="param" class="top-header" :scrollBool="topTabarObj.getScrollBool()" />
					<!-- #endif -->
					<view class="h-[320rpx] box-border px-[var(--sidebar-m)] pt-[44rpx] flex flex-col justify-between">
						<view class="flex flex-col text-[#303133]  flex-1">
							<view v-if="info" class="flex items-center">
								<!-- 唤起获取微信 -->
								<u-avatar
									:src="img(info.headimg)"
									:size="'110rpx'"
									leftIcon="none"
									:default-url="img('static/resource/images/default_headimg.png')"

								/>
								<view class="ml-[20rpx] flex-1">
									<view class="text-[#000] flex items-baseline flex-wrap">
										<view class="text-[32rpx] truncate max-w-[320rpx] font-500 leading-[38rpx]">{{ info.nickname }}</view>
										<view class="text-[26rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.mobile">
											{{ info.mobile.replace(info.mobile.substring(3, 7), '****') }}
										</view>
									</view>
									<view class="text-[#666] text-[24rpx] font-400 leading-[28rpx] mt-[14rpx]">UID：{{ info.member_no }}</view>
								</view>
								<text @click="redirect({ url: '/app/pages/setting/index' })" class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]"></text>
							</view>
							<view class="text-[24rpx] text-[var(--text-color-light6)] mt-[20rpx]" v-if="detail.parent_fenxiao">
								上级分销商：{{ detail.parent_fenxiao.nickname }}
							</view>

							<!-- <view class="flex items-center text-[#fff] text-[24rpx] ml-auto">
                                <text class="nc-iconfont nc-icon-a-bangzhuV6xx-36 mr-[10rpx]"></text>
                                <text>推广规则</text>
                            </view> -->
						</view>
						<view
							class="flex items-center h-[140rpx] box-border rounded-[var(--rounded-big)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]"
							:style="{
								backgroundImage: 'url(' + img('addon/shop_fenxiao/index/head_bg.png') + ') ',
								backgroundSize: 'cover',
								backgroundRepeat: 'no-repeat',
								backgroundPosition: 'cover'
							}"
							@click="applyCashOut()"
						>
							<view class="flex">
								<image class="w-[74rpx] h-[74rpx] mr-[26rpx]" :src="img('/upload/dyj/static/money.png')" mode="widthFix" />
								<view class="flex flex-col justify-center">
									<text class="text-[30rpx] truncate w-[320rpx] font-500 text-[#FDD6A1]">{{ detail.to_withdraw }}</text>
									<text class="text-[26rpx] text-[#E8D3B6] mt-[16rpx]">累计可以提现</text>
								</view>
							</view>
							<text class="ml-auto level-wrap w-[120rpx] h-[54rpx] text-center rounded-[54rpx] text-[22rpx] flex-center text-[#794200]">去提现</text>
						</view>
					</view>
				</view>

				<!-- 标签页切换 -->
				<view class="sidebar-margin my-[var(--top-m)]">
					<view class="flex rounded-[var(--rounded-big)]">
						<view
							class="flex-1 text-center py-[24rpx] text-[28rpx] font-500 relative"
							:class="activeTab === 'recommend' ? 'text-[#333]' : 'text-[#999]'"
							@click="activeTab = 'recommend'"
						>
							内部推荐人
							<view
								v-if="activeTab === 'recommend'"
								class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[60rpx] h-[4rpx] bg-[#D4A574] rounded-[2rpx]"
							></view>
						</view>
						<view
							class="flex-1 text-center py-[24rpx] text-[28rpx] font-500 relative"
							:class="activeTab === 'market' ? 'text-[#333]' : 'text-[#999]'"
							@click="activeTab = 'market'"
						>
							设备投放员
							<view v-if="activeTab === 'market'" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[60rpx] h-[4rpx] bg-[#D4A574] rounded-[2rpx]"></view>
						</view>
					</view>
				</view>
				<template v-if="activeTab === 'recommend'">
					<!-- 我推广的设备 -->
					<view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]"  @click="cashOutList(1)">
						<view class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
							<text class="text-[30rpx] font-500">我推广的设备</text>
							<view class="text-[var(--text-color-light6)] text-[26rpx]">
								<text>佣金明细</text>
								<text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
							</view>
						</view>
						<view class="flex mt-[50rpx] justify-around commission-content" v-if="detail?.device_commission">
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">累计佣金</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_commission.total_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toPendingSettlementOrder">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">待结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_commission.unsettlement_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">已结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_commission.settlemented_commission }}</text>
							</view>
						</view>
					</view>

					<!-- 设备耗材佣金 -->
					<view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]" @click="cashOutList(2)">
						<view class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
							<text class="text-[30rpx] font-500">租金/耗材佣金</text>
							<view class="text-[var(--text-color-light6)] text-[26rpx]" >
								<text>佣金明细</text>
								<text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
							</view>
						</view>
						<view class="flex mt-[50rpx] justify-around commission-content" v-if="detail?.device_rent_commission">
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">累计佣金</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_rent_commission.total_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toPendingSettlementOrder">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">待结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_rent_commission.unsettlement_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">已结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.device_rent_commission.settlemented_commission }}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="activeTab === 'market'">
					<!-- 门店设备佣金 -->
					<view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]" @click="cashOutList(3)">
						<view class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
							<text class="text-[30rpx] font-500">设备出租佣金</text>
							<view class="text-[var(--text-color-light6)] text-[26rpx]">
								<text>佣金明细</text>
								<text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
							</view>
						</view>
						<view class="flex mt-[50rpx] justify-around commission-content" v-if="detail?.store_rent_commission">
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">累计佣金</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_rent_commission.total_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toPendingSettlementOrder">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">待结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_rent_commission.unsettlement_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">已结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_rent_commission.settlemented_commission }}</text>
							</view>
						</view>
					</view>

					<!-- 门店耗材佣金 -->
					<view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]"  @click="cashOutList(4)">
						<view class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
							<text class="text-[30rpx] font-500">耗材使用佣金</text>
							<view class="text-[var(--text-color-light6)] text-[26rpx]">
								<text>佣金明细</text>
								<text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
							</view>
						</view>
						<view class="flex mt-[50rpx] justify-around commission-content" v-if="detail?.store_usage_commission">
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">累计佣金</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_usage_commission.total_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toPendingSettlementOrder">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">待结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_usage_commission.unsettlement_commission }}</text>
							</view>
							<view class="flex flex-col items-center" @click="toCommission">
								<text class="text-[24rpx] text-[var(--text-color-light9)]">已结算</text>
								<text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{ detail.store_usage_commission.settlemented_commission }}</text>
							</view>
						</view>
					</view>
				</template>
				<!-- 提现按钮 -->
				<view class="sidebar-margin mb-[var(--top-m)] mt-[50rpx]">
					<view class="text-center mx-auto w-[570rpx] h-[76rpx] flex-center level-wrap text-[#985400] rounded-[90rpx] text-[26rpx] font-500" @click="applyCashOut">
						提现
					</view>
				</view>

				<view class="grid grid-cols-2 gap-x-[20rpx] my-[var(--top-m)] sidebar-margin">
					<view
						class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] team-bg relative"
						@click.stop="redirect({ url: '/addon/shop_fenxiao/pages/team' })"
					>
						<image class="w-[76rpx] h-[76rpx] mr-[20rpx]" :src="img('/upload/dyj/static/fenxiao_logo1.png')" mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[28rpx]">我的团队</text>
							<text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">{{ fenxiaoTeamNum }}人</text>
						</view>
						<view><image class="w-[34rpx] h-[34rpx] absolute top-[20rpx] right-[20rpx]" :src="img('/upload/dyj/static/arrow_down.png')" mode="widthFix" /></view>
					</view>
					<view
						class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] fenxiao-bg relative"
						@click.stop="redirect({ url: '/addon/shop_fenxiao/pages/child_fenxiao' })"
					>
						<image class="w-[76rpx] h-[76rpx] mr-[20rpx]" :src="img('/upload/dyj/static/fenxiao_logo2.png')" mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[28rpx]">分销商</text>
							<text class="text-[var(--text-color-light6)] text-[24rpx] mt-[10rpx]">{{ childFenxiaoNum }}人</text>
						</view>
						<view><image class="w-[34rpx] h-[34rpx] absolute top-[20rpx] right-[20rpx]" :src="img('/upload/dyj/static/arrow_down.png')" mode="widthFix" /></view>
					</view>
				</view>

				<view class="commission-bg pb-[35rpx] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
					<view class="py-[30rpx] px-[24rpx] border-0 border-b-[2rpx] border-solid border-[#f6f6f6] text-[30rpx] font-500">常用功能</view>
					<view class="flex flex-wrap common-module pt-[7rpx]">
						<view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="redirect({ url: '/addon/shop_fenxiao/pages/promote' })">
							<image class="w-[66rpx] h-[66rpx]" :src="img('/upload/dyj/static/code.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">邀请好友</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">邀好友赚好礼</text>
							</view>
						</view>
						<view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="redirect({ url: '/addon/shop_fenxiao/pages/order' })">
							<image class="w-[66rpx] h-[66rpx]" :src="img('/upload/dyj/static/task.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">推广订单</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">推广订单明细</text>
							</view>
						</view>
						<view
							class="flex items-center flex-col w-[33.3%] py-[23rpx]"
							v-if="config.team_config.is_open == 1"
							@click="redirect({ url: '/addon/shop_fenxiao/pages/team_dividend' })"
						>
							<image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/team2.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">团队分红</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">团队分红</text>
							</view>
						</view>
						<view
							class="flex items-center flex-col w-[33.3%] py-[23rpx]"
							v-if="config.agent_config.is_open == 1"
							@click="redirect({ url: '/addon/shop_fenxiao/pages/agent_list' })"
						>
							<image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/channel.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">渠道代理</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">渠道代理</text>
							</view>
						</view>
						<view
							class="flex items-center flex-col w-[33.3%] py-[23rpx]"
							v-if="config.task_config.is_open == 1"
							@click="redirect({ url: '/addon/shop_fenxiao/pages/task_rewards' })"
						>
							<image class="w-[66rpx] h-[66rpx]" :src="img('/upload/dyj/static/task.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">{{ t('task') }}</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">{{ t('taskDesc') }}</text>
							</view>
						</view>
						<view
							class="flex items-center flex-col w-[33.3%] py-[23rpx]"
							v-if="config.sale_config.is_open == 1"
							@click="redirect({ url: '/addon/shop_fenxiao/pages/sale' })"
						>
							<image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/market.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">{{ t('sale') }}</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">{{ t('saleDesc') }}</text>
							</view>
						</view>
						<view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="redirect({ url: '/addon/shop_fenxiao/pages/goods' })">
							<image class="w-[66rpx] h-[66rpx]" :src="img('/upload/dyj/static/market.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[16rpx]">
								<text class="text-[26rpx]">分销商品</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">分销商品</text>
							</view>
						</view>
						<!-- <view class="flex items-center flex-col w-[33.3%] py-[20rpx]" @click="redirect({ url: '/addon/shop_fenxiao/pages/zone' })">
                            <image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/fenxiao_prefecture.png')" mode="widthFix"/>
                            <view class="flex flex-col items-center mt-[12rpx]">
                                <text class="text-[24rpx]">分销专区</text>
                                <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">分销专区</text>
                            </view>
                        </view> -->
						<view class="flex items-center flex-col w-[33.3%] py-[20rpx]" @click="redirect({ url: '/addon/shop_fenxiao/pages/shop_list' })">
							<image class="w-[66rpx] h-[66rpx]" :src="img('/upload/dyj/static/fenxiao_shop.png')" mode="widthFix" />
							<view class="flex flex-col items-center mt-[12rpx]">
								<text class="text-[24rpx]">门店列表</text>
								<text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">我推广的门店</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<!-- #ifdef MP-WEIXIN -->
				<top-tabbar :data="paramEmpty" class="top-header" :scrollBool="topTabarObj.getScrollBool()" />
				<!-- #endif -->
				<view class="empty-page">
					<image class="img w-[260rpx] h-[152rpx]" mode="widthFix" :src="img('addon/shop_fenxiao/unopened-fenxiao.png')" />
					<view class="desc">{{ t('fenxiaoNotOpen') }}</view>
				</view>
			</template>
		</view>
		<loading-page :loading="loading"></loading-page>
		<tabbar addon="shop" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import useMemberStore from '@/stores/member';
import { onShow } from '@dcloudio/uni-app';
import { moneyFormat, img, redirect } from '@/utils/common';
import { t } from '@/locale';
import { getFenxiaoDetail, getChildFenxiao, getFenxiaoTeam, getConfig } from '@/addon/shop_fenxiao/api/fenxiao';
import useSystemStore from '@/stores/system';
import { topTabar } from '@/utils/topTabbar';
const memberStore = useMemberStore();
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar();
let param = topTabarObj.setTopTabbarParam({ title: '管理中心', topStatusBar: { textColor: '#333' } });
let paramEmpty = topTabarObj.setTopTabbarParam({
	title: '管理中心',
	topStatusBar: { textColor: '#333', bgColor: '#fff' }
});

/********* 自定义头部 - end ***********/

const systemStore = useSystemStore()
const detail = ref({ 'member': {}, 'fenxiao_level': {} });
const loading = ref<boolean>(true);
const activeTab = ref('recommend');
const info = computed(() => {
	return memberStore.info;
});
onShow(() => {
	memberStore.getMemberInfo();
	watch(
		() => systemStore.siteAddons,
		(newValue, oldValue) => {
			if (newValue && Object.keys(newValue).length) {
				if (!systemStore.siteAddons.includes('shop_fenxiao')) {
					uni.showToast({
						title: '该站点未安装分销插件',
						icon: 'none'
					});

					setTimeout(() => {
						if (getCurrentPages().length > 1) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							redirect({
								url: '/addon/shop/pages/member/index',
								mode: 'reLaunch'
							});
						}
					}, 1500);
				}
			}
		},
		{ deep: true }
	);

    getConfigFn();
    getChildFenxiaoFn();
    getFenxiaoTeamFn();
    getFenxiaoDetail().then((res: any) => {
        let data = res.data;
        if (Object.keys(data).length) {
            detail.value = res.data;
            loading.value = false;
        } else {
            loading.value = true;
            redirect({ url: '/addon/shop_fenxiao/pages/apply', mode: 'redirectTo' })
        }
    });

});

const config: Record<string, any> = ref({});
const getConfigFn = () => {
	getConfig().then((res: any) => {
		config.value = Object.assign(config.value, res.data);
	});
};

// 分销商数
const childFenxiaoNum = ref(0);
const getChildFenxiaoFn = () => {
	getChildFenxiao()
		.then((res: any) => {
			childFenxiaoNum.value = res.data.length || 0;
		})
		.catch(() => {
			childFenxiaoNum.value = 0;
		});
};

// 我的团队数
const fenxiaoTeamNum = ref(0);
const getFenxiaoTeamFn = () => {
	getFenxiaoTeam()
		.then((res: any) => {
			fenxiaoTeamNum.value = res.data.direct.length + res.data.indirect.length || 0;
		})
		.catch(() => {
			fenxiaoTeamNum.value = 0;
		});
};

// 申请提现
const applyCashOut = () => {
	uni.setStorageSync('cashOutAccountType', 'money');
	redirect({ url: '/app/pages/member/apply_cash_out', param: { money: detail.value.to_withdraw, disabledChangeMoney: true } });
};
// 佣金明细
const cashOutList = (index:number) => {
	redirect({ url: '/addon/shop_fenxiao/pages/detailed_account', param: { type: 'commission',index:index } });
};
// 我的佣金
const toCommission = () => {
	redirect({ url: '/app/pages/member/commission' });
};

// 分销订单
const toPendingSettlementOrder = () => {
	redirect({ url: '/addon/shop_fenxiao/pages/order', param: { isSettlement: 0 } });
};
</script>

<style lang="scss" scoped>
.level-wrap {
	background: linear-gradient(90deg, #fde4c0, #fdc274);
}

.commission-bg {
	// background: linear-gradient(180deg, #FFF9F3 5%, #FFFFFF 25%, #FFFFFF 100%);
	background: #ffffff;
}

.team-bg {
	background: linear-gradient(135deg, #ffffff 70%, #fde2bc 100%);
}

.fenxiao-bg {
	background: linear-gradient(135deg, #ffffff 70%, #fde2bc 100%);
}

.commission-content > view {
	position: relative;
	width: 210rpx;

	&::after {
		content: '';
		position: absolute;
		width: 2rpx;
		height: 60rpx;
		background-color: var(--temp-bg);
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	&:last-of-type::after {
		width: 0;
		height: 0;
	}
}

.common-module > view {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		width: 2rpx;
		height: 80rpx;
		background-color: var(--temp-bg);
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	&:nth-child(3n + 1)::after {
		width: 0;
		height: 0;
	}
}
</style>
